<html>
    <head>
        <meta charset="utf-8">
        <title>...</title>
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <style type="text/css">
            body{
                background-repeat: no-repeat;
            }
            table{
                border-collapse: collapse;
                display: inline;
            }
            td{
                border: 2px solid green;
            }
            input{
                display: block;
                width: 160px;
                text-align: center;
            }
            button{
                display: block;
            }
            div{
                color: red;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <h1>Query ID</h1>//exa: 420111198611141910
                    <input class="inputID" type="search" name="" placeholder="input Query ID">
                    <br>
                    <button id="getID">Query ID</button>
                    <button class ="isHieednBtn">X</button>
                    <ol class="isOlHieedn">
                        <li id="address"></li>
                        <li id="birthday"></li>
                        <li id="sex"></li>
                    </ol>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <h1>Query Phone Belonging</h1>//exa: 15103856756
                    <input class="inputPhone" type="search" name="" placeholder="input Phone Belonging">
                    <br>
                    <button id="getPhone">Query Phones Belonging</button>
                    <button class ="isHieednBtn2">X</button>
                    <ol class="isOlHieedn2">
                        <li id="areaVid"></li>
                        <li id="carrier"></li>
                        <li id="catName"></li>
                        <li id="ispVid"></li>
                        <li id="mts"></li>
                        <li id="province"></li>
                        <li id="telString"></li>
                    </ol>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <h1>Query Weather</h1>//exa: 郑州
                    <input class="inputCity" type="search" name="" placeholder="input City">
                    <br>
                    <button id="getCity">Query Weather</button>
                    <button class ="isHieednBtn3">X</button>
                    <div id="showWeather"> </div>
                </td>
            </tr>
        </table>
    </body>
</html>
<script>
    $(function () {
        hiddenDefaultTd();//HiddenWidget
        $('#getID').click(function () {//getQueryResult
            val = Trim($('.inputID').val());
            if (val=='') {
            	alert('身份证号有误,请重新输入');
            }else{
            	$.get('server.php?ID='+val,function (data) {//SubmitData
	                error = JSON.parse(data).retMsg;
	                if (JSON.parse(data).retMsg=="success") {//ShowWidget

	                    $("#address").text('address:'+JSON.parse(data).retData.address);
	                    $("#birthday").text('birthday:'+JSON.parse(data).retData.birthday);
	                    $("#sex").text('sex:'+JSON.parse(data).retData.sex);

	                    $(".isHieednBtn").css({display:"block",margin:'0px 10px 0px 260px'});
	                    $(".isOlHieedn").css({fontSize:"16px",color:"green",display:'block'});

	                    // <button class ="hieedn" class="show">X</button>
	                    $(".isHieednBtn").click(function () {//HiddenWidget
	                        hiddenDefaultTd();
	                    });

	                }else{//ToDealIllegalID
	                    if (error='undefined') {
	                        alert('您请输入身份证号不存在');
	                    }else{
	                        alert(error);
	                    }
	                }
	            });
            }
            
        });

        hiddenDefaultTd2();
        $('#getPhone').click( function () {
            if((/^1[34578]\d{9}$/.test($('.inputPhone').val()))){ 
                 $.get('http://tcc.taobao.com/cc/json/mobile_tel_segment.htm',{tel:$('.inputPhone').val()},function (obj){//
                    if(obj.province !== ""){ 
                        console.log(obj);
                        $("#areaVid").text('areaVid:'+obj.areaVid);
                        $("#carrier").text('carrier:'+obj.carrier);
                        $("#catName").text('catName:'+obj.catName);
                        $("#ispVid").text('ispVid:'+obj.ispVid);
                        $("#mts").text('mts:'+obj.mts);
                        $("#province").text('province:'+obj.province);
                        $("#telString").text('telString:'+obj.telString);

                        $(".isHieednBtn2").css({display:"block",margin:'0px 10px 0px 260px'});
                        $(".isOlHieedn2").css({fontSize:"16px",color:"green",display:'block'});

                        $(".isHieednBtn2").click(function () {//HiddenWidget
                            hiddenDefaultTd2();
                        });

                    }else{//18154795845
                        alert('手机号码有误,请重新输入');
                    }
                },'jsonp');
            }else{
                alert('不合法的手机号');
            }
                    
        });
            
        hiddenDefaultTd3();
        $('#getCity').click( function () {
            $.ajax({
                url:"http://apis.baidu.com/apistore/weatherservice/citylist",
                type:"get",
                data:"cityname="+$('.inputCity').val(),
                dataType:'json',
                headers:{'apikey':'e821ffde237b29e45e118a2f3a13fe8d'},
                success:function(data) {
                    console.log(data);
                    if (data.errNum == -1 || 
                        $('.inputCity').val()=='' ||
                        data.errMsg=="Service provider response status error") {
                        alert('请检测输入的是否城市名称');
                    }else{
                        cityid=data.retData[0].area_id;
                        cityname=data.retData[0].name_cn;
                        $.ajax({
                            url:"http://apis.baidu.com/apistore/weatherservice/recentweathers",
                            type:"get",
                            data:"cityname="+cityname+"&"+"cityid="+cityid,
                            dataType:'json',
                            headers:{'apikey':'e821ffde237b29e45e118a2f3a13fe8d'},

                            success:function(data) {
                                $('body').css("background-image","url('http://imgsrc.baidu.com/forum/w%3D580%3B/sign=adabad432f7f9e2f70351d002f0be824/472309f7905298227e2e2666dfca7bcb0a46d471.jpg')");
                                $("ol").remove(".isOlHieedn3");
                                for (var i = 0; i<data.retData.forecast.length; i++) {
                                    console.log(data.retData.forecast[i]);
                                    $("#showWeather").append("<ol class='isOlHieedn3'><li>date:"+data.retData.forecast[i].date+"</li><li>fengli:"+data.retData.forecast[i].fengli+"</li><li>fengxiang:"+data.retData.forecast[i].fengxiang+"</li><li>hightemp:"+data.retData.forecast[i].hightemp+"</li><li>lowtemp:"+data.retData.forecast[i].lowtemp+"</li><li>type:"+data.retData.forecast[i].type+"</li><li>week:"+data.retData.forecast[i].week+"</li></ol>");
                                }
                                $(".isHieednBtn3").css({display:"block",margin:'0px 10px 0px 230px'});
                                $(".isOlHieedn3").css({fontSize:"16px",color:"green",display:'block'});
                                $(".isHieednBtn3").click(function () {//HiddenWidget
                                    hiddenDefaultTd3();
                                    
                                });
                            }
                        });
                    }
                }
            });
        });

        function Trim(str){//RemoveBlankSpace
            return str.replace(/(^\s*)|(\s*$)/g, ""); 
        }
        function hiddenDefaultTd() {
            $(".isHieednBtn").css({display:"none"});
            $(".isOlHieedn").css({display:"none"});
            $(".inputID").val('');
        }
        function hiddenDefaultTd2() {
            $(".isHieednBtn2").css({display:"none"});
            $(".isOlHieedn2").css({display:"none"});
            $(".inputPhone").val('');
        }
        function hiddenDefaultTd3() {
            $(".isHieednBtn3").css({display:"none"});
            $(".isOlHieedn3").css({display:"none"});
            $(".inputCity").val('');
            $(".showWeather").css({display:"none"});
            $("hr").css({height:"0px"});
            $('body').css("background-image","url('')");
        }
    });
</script>
